<template>
  <div class="business">
    <div class="delivery">
      <van-panel title="配送信息">
        <div class="det">
          <p class="tag">
            <van-tag
              type="primary"
              class="fn"
            >蜂鸟专送</van-tag>
            <span class="time">约{{seller.deliveryTime}}分钟送达,距离{{seller.distance}}km</span>
          </p>
          <p class="run_money">配送费¥{{seller.deliveryPrice}}</p>
        </div>
      </van-panel>
    </div>
    <div class="announce">
      <van-panel title="公告与活动">
        <div class="anc_con">{{seller.bulletin}}</div>
        <div class="discount">
          <p
            v-for="(support,index) in supports"
            :key="index"
          >
            <van-tag
              type="success"
              :color="support.color"
              class="tag"
            >{{support.text}}</van-tag>
            {{support.description}}
          </p>
        </div>
      </van-panel>
    </div>
    <div class="view">
      <van-panel title="商家实景">
        <div class="imgBox">
          <van-image
            v-for="(img,index) in pics"
            :key="index"
            width="6rem"
            height="3rem"
            fit="cover"
            :src="img"
            class="img_inner"
            @click="Preview(index)"
          />
          <!-- <div class="txt">大堂(共3张)</div> -->
        </div>
      </van-panel>
    </div>
    <div class="msg">
      <van-panel title="商家信息">
        <div class="det">{{infos[0]}}</div>
      </van-panel>
      <van-cell-group>
        <van-cell
          title="品类"
          :value="infos[1]"
        />
        <van-cell title="商家电话">
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <van-icon
            slot="right-icon"
            name="phone-o"
            style="line-height: inherit;"
            class="phone"
            color="#00a6ff"
          > 联系商家</van-icon>
        </van-cell>
        <van-cell>
          <van-icon
            slot="right-icon"
            style="line-height: inherit;"
          >
            <p>{{infos[2]}}</p>
          </van-icon>
        </van-cell>
        <van-cell
          title="营业时间"
          :value="infos[3]"
        />
      </van-cell-group>
    </div>
    <van-cell
      title="营业资质"
      class="last_cell"
    />
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
export default {
  data: () => ({
    seller: {},
    infos: [],
    pics: [],
    supports: []
  }),
  props: ["id"],
  created() {
    this.getSeller();
  },
  methods: {
    async getSeller() {
      const {
        data: { status, sellers }
      } = await this.$axios.get("api/getdetail/seller");
      if (status !== 0) return this.$Toast("请求失败");
      sellers.forEach(el => {
        if (el.id === this.id) {
          this.seller = el.seller;
          this.infos = el.seller.infos;
          this.pics = el.seller.pics;
          this.supports = el.seller.supports;
        }
      });
      console.log(this.seller);
      console.log(this.infos);
      console.log(this.pics);
      console.log(this.supports);
    },
    Preview(startPosition) {
      let images=this.pics;
      ImagePreview({
        images,
        startPosition
      });
    }
  }
};
</script>
<style lang="less" scoped>
.business {
  background-color: #f5f5f5;
  height: 696px;
  .delivery {
    // padding: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    box-sizing: border-box;
    .van-cell__title {
      font-size: 14px;
      font-weight: 800;
    }
    .det {
      padding: 10px 0 10px 13px;
      .tag {
        margin: 3px 0;
        .fn {
          margin-right: 10px;
        }
        .time {
          color: #666;
        }
      }
    }
    .run_money {
      color: #666;
    }
  }
  .announce {
    font-size: 12px;
    margin: 10px 0;
    .van-cell__title {
      font-size: 14px;
      font-weight: 800;
    }
    .anc_con {
      box-sizing: border-box;
      padding: 2px 10px;
      color: red;
    }
    .discount {
      box-sizing: border-box;
      padding: 2px 10px;
      color: #999;
      p {
        padding-left: 10px;
        .tag {
          margin-right: 10px;
        }
      }
    }
  }
  .view {
    font-size: 12px;
    position: relative;
    margin-bottom: 10px;
    .van-cell__title {
      font-size: 14px;
      font-weight: 800;
    }
    .imgBox {
      padding: 10px;
      position: relative;
      display: flex;
      justify-content: space-between;
      .img_inner {
        margin: 0 5px;
      }
    }
  }
  .msg {
    font-size: 12px;
    color: #999;
    .van-cell__title {
      font-size: 14px;
      font-weight: 800;
    }
    .det {
      padding: 6px 0 10px 14px;
      color: #999;
    }
    .phone {
      font-size: 12px;
      color: #00a6ff;
    }
    p {
      margin: 0;
      color: #999;
    }
  }
  .last_cell {
    margin-top: 10px;
    .van-cell__title {
      font-weight: 800;
    }
  }
}
</style>